<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  data () {
    return {
      cdata: {
        category: [
          "罗湖区",
          "福田区",
          "南山区",
          "宝安区",
          "龙岗区",
          "盐田区",
          "龙华区",
          "坪山区",
          "光明区"
        ],
        lineData: [
          95,
          92,
          94,
          90,
          93,
          91,
          89,
          88,
          90
        ],
        barData: [
          88,
          85,
          87,
          83,
          86,
          84,
          82,
          80,
          83
        ],
        rateData: []
      }
    };
  },
  components: {
    Chart,
  },
  mounted () {
    this.setData();
  },
  methods: {
    // 根据自己的业务情况修改
    setData () {
      for (let i = 0; i < this.cdata.barData.length -1; i++) {
        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
        this.cdata.rateData.push(rate.toFixed(2));
      }
    },
    // 更新图表数据，接收API返回的数据
    updateChart(apiData) {
      if (!apiData || !apiData.length) return;
      
      // 准备数据
      const categories = [];
      const barData = [];
      const lineData = [];
      
      // 处理API数据
      apiData.forEach(item => {
        if (item.duty_type && item.count) {
          categories.push(item.duty_type);
          // 实际数据使用API返回的count
          barData.push(item.count);
          // 目标数据可以设置为实际数据的1.1倍
          lineData.push(Math.round(item.count * 1.1));
        }
      });
      
      // 如果有有效数据，则更新
      if (categories.length > 0) {
        this.cdata.category = categories;
        this.cdata.barData = barData;
        this.cdata.lineData = lineData;
        
        // 清空旧的比率数据
        this.cdata.rateData = [];
        
        // 重新计算比率数据
        this.setData();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>